<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Learn Laravel 5</title>

    <link rel="stylesheet" href="{{ URL::asset('/') }}css/app.css" >
    <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery-1.11.3.min.js"></script>
    <script language="JavaScript" src="{{ URL::asset('/') }}js/bootstrap3.2.0.min.js"></script>
    <script language="JavaScript" src="{{ URL::asset('/') }}js/jquery.qrcode.min.js"></script>
</head>

    <div id="title" style="text-align: center;">
        <h1>售后报修系统</h1>
        <div style="padding: 5px; font-size: 16px;"> x x  开发</div>  
    </div>
    <hr>
    <div id="content">

        <div class="container">
                <div class="row">
                    <div class="col-md-10 col-md-offset-1">
                        <div class="panel panel-default">
                            <div class="panel-heading">报修登记</div>
                            <div class="panel-body">

                                @if(count($errors) > 0)
                                    <div class="alert alert-info">
                                        <strong>
                                        {!! implode('<br>', $errors->all()) !!}
                                        </strong><br><br> 
                                    </div>
                                @endif
                                <form action="{{ url('/testdeal') }}" method="post" enctype="multipart/form-data">
                                    {!! csrf_field() !!}
                                    <label>客户名称</label>
                                    <input type="text" id='name' name="name" class="form-control"  >
                                    <br>
                                    <label>机器型号</label>
                                    <input type="text" id='machine' name="machine" class="form-control"  >
                                    <br>
                                    <label>机器条形码</label>
                                    <input type="text" id='code' name="code" class="form-control"  >
                                    <br>
                                    <label>联系人电话号码</label>
                                    <input type="text" id='photonumber' name="photonumber" class="form-control"  >
                                    <br>
                                    <label>联系人地址</label>
                                    <input type="text" id='address' name="address" class="form-control"  >
                                    <br>
                                    <label>不良现象描述</label>
                                    <textarea id='describe' name="describe" rows="10" class="form-control"></textarea>
                                    <br>

                                    <label>图片上传(可选填,最多上传三张图片)</label>
                                    <input type="file" id='pic' name="pic">
                                    <br>

                                    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id='mymodal'>Submit</button>
                                    <!-- Modal -->
                                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                                      <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                          <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel">Please confirm your message</h4>
                                          </div>
                                          <div class="modal-body">
                                            <p>客户名称 :  </p>
                                            <p>机器型号 :  </p>
                                            <p>机器条形码 : </p>
                                            <p>联系人电话号码 :  </p>
                                            <p>联系人地址 : </p>
                                            <p>不良现象描述 :  </p>
                                            <p>图片：</p>
                                          </div>
                                          <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                                            <button type="submit" class="btn btn-primary">Submit</button>
                                          </div>
                                        </div>
                                      </div>
                                    </div>
                                </form>              
                            </div>
                            <div id="qrcodeCanvas" align="center"></div>
                            <div style="padding: 5px; font-size: 16px; text-align:center">你也可以通过扫码来到本页面</div>  
                        </div>
                    </div>
                </div>    
            </div>
        </div>


<script>
$(function(){
    jQuery('#qrcodeCanvas').qrcode({
        width   : 150,
        height  : 150,
        text    : "http://service.com"
    }); 

   $('#mymodal').click(function(){
         var parr = $('.modal-body p');
         parr[0].innerText += $('#name').val();
         parr[1].innerText += $('#machine').val();
         parr[2].innerText += $('#code').val();
         parr[3].innerText += $('#photonumber').val();
         parr[4].innerText += $('#address').val();
         parr[5].innerText += $('#describe').val();
   });


})


</script>
</body>
</html>